/**
 * Created by zcy-fover on 2017/3/12.
 * 该js用于实现当鼠标悬停在缩略语上时，可以显现全拼
 */

function displayAbbreviations() {
    //先获取文档中所有的缩略语
    var abbreviations = document.getElementsByTagName('abbr');
    if (abbreviations.length >= 1) {
        var defs = [];
        for (var i = 0; i < abbreviations.length; i++) {
            //获取所有的abbr标签的title属性
            var definition = abbreviations[i].getAttribute('title');
            /**
             * 获取每个abbr节点的文本内容，该文本内容可能是abbr节点的第一个子节点。
             * 但是也有可能包含在其他节点内，所以使用abbr标签的lastChild属性较为保险
             * 节点内容即缩略语
             * 用key将缩略语和全拼绑定
             * @type {string}
             */
            var key = abbreviations[i].lastChild.nodeValue;
            defs[key] = definition;
        }

        /**
         * 创建定义列表，
         * @type {Element}
         */
        var dlist = document.createElement('dl');
        for (key in defs) {
            var definiation = defs[key];
            //创建定义标题
            var dtitle = document.createElement('dt');
            var dtitleText = document.createTextNode(key);
            dtitle.appendChild(dtitleText);
            //创建描述节点
            var ddesc = document.createElement('dd');
            var ddescText = document.createTextNode(definiation);
            dtitle.appendChild(ddescText);
            //将title和desc链接到定义的列表上
            dlist.appendChild(dtitle);
            dlist.appendChild(ddesc);
        }
        //创建标题
        var header = document.createElement('h2');
        var headerText = document.createTextNode('abbreviation');
        //将创建的标题连接到body上
        document.body.appendChild(header);
        //将创建的列表连接到body上
        document.body.appendChild(dlist);
    } else {
        return false;
    }
}

addLoadEvent(displayAbbreviations);
